<template>
  <div class="backage">
    <c-header />
    <div class="main clearfix">
      <left-navigation />
      <div class="layout-container">
        <div class="banner"><img src="~/assets/images/banner.png">  </div>
        <div class="channel"> 
          <span class="channel-name">电脑推广渠道</span>
          <div class="channel-tool">
            <span class="channel-detail" @click="isTableDialog=true"><i class="iconfont iconform"></i>推广一览表</span>
            <span class="channel-size"><i class="iconfont iconRuler"></i>推广位尺寸表</span>
          </div>  
        </div>
        <el-tabs class="site-list" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学科子站" name="first">学科子站</el-tab-pane>
          <el-tab-pane label="视频站" name="second">视频站</el-tab-pane>
          <el-tab-pane label="精品站" name="third">精品站</el-tab-pane>
          <el-tab-pane label="书城" name="fourth">书城</el-tab-pane>
          <el-tab-pane label="头条" name="fifth">头条</el-tab-pane>
          <el-tab-pane label="网校通" name="sixth">网校通</el-tab-pane>
          <el-tab-pane label="客服" name="seventh">客服</el-tab-pane>
        </el-tabs>
        <!-- 选择图库图片弹框 -->
        <el-dialog title="" :visible.sync="isTableDialog" width="853px">
          <advertise-table />
        </el-dialog>
        <nuxt />
      </div>
    </div>
  </div>
</template>
<script>
  import leftNavigation from '~/components/LeftNavigation.vue';
  import cHeader from '~/components/CHeader.vue';
  import advertiseTable from "@/components/advertise/AdvertiseTable.vue"
  export default {
    data(){
      return {
        isTableDialog:false
      }
    },
    components : {
      leftNavigation,
      cHeader,
      advertiseTable
    }
  }
</script>
<style lang="scss">
.backage{
  min-width: 1200px;
}
.layout-container{
  width: calc(100% - 313px);
  padding:37px 40px 0 0;
  float:left;
  .banner{
    width:100%;
  
    img{
      display:block;
      width:100%;
    }
  }
  .channel{
    position: relative;
    margin-top:36px;
    line-height: 22px;
    height:22px;
    .channel-name{
      font-size: 22px;
      color: #0F1B41;
    }
    .channel-tool{
      position: absolute;
      top:0;
      right:0;
      .channel-size,.channel-detail{
        font-size: 14px;
        color: #5A7180;
        cursor: pointer;
        .iconfont{
          display: inline-block;
          margin-right:6px;
          font-size:14px;
        }
      }
      .channel-size{
        margin-left:40px;
      }
    }
  }
  .site-list{
    margin-top:40px;
  }

}
</style>
